<template>
  <!-- <header>
    <van-icon name="arrow-left" size="35" />
  </header> -->
  <van-nav-bar
    title="标题"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="create">创建你的个人账户</div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <!-- <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      /> -->
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
            <van-radio name="3">保密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 时间选择 -->
      <van-field
        v-model="result"
        is-link
        readonly
        name="datePicker"
        label="时间选择"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <!-- 手机号 -->
      <van-field v-model="tel" type="tel" label="手机号" name="tel" />
      <!-- 邮箱地址 -->
      <van-field v-model="email" type="email" label="邮箱地址" name="email" />
      <!-- 输入密码 -->
      <van-field
        v-model="password"
        type="password"
        label="密码"
        name="password"
      />
      <!-- 输入确认密码 -->
      <van-field
        v-model="surepassword"
        type="password"
        label="确认密码"
        name="surepassword"
      />
      <!-- 身份单选框选择 -->
      <van-field name="radio1" label="身份">
        <template #input>
          <van-radio-group v-model="checked2" direction="horizontal">
            <van-radio name="1">房东</van-radio>
            <van-radio name="2">租客</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="result1"
        is-link
        readonly
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <!-- 个人简介 -->
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="个人简介"
        type="textarea"
        maxlength="150"
        placeholder="请输入个人简介"
        show-word-limit
      />
      <!-- 个人照片 -->
      <van-field name="uploader" label="个人照片">
        <template #input>
          <van-uploader v-model="value" />
        </template>
      </van-field>
    </van-cell-group>
    <van-popup v-model:show="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm1"
        @cancel="showArea = false"
      />
    </van-popup>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        下一步
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { areaList } from "@vant/area-data";
const username = ref("");
// const password = ref("");

//头部跳转
const onClickLeft = () => history.back();
//单选框
const checked = ref("1");
const checked2 = ref("1");

// 时间选择
const result = ref("");
const showPicker = ref(false);
const onConfirm = ({ selectedValues }: any) => {
  result.value = selectedValues.join("/");
  showPicker.value = false;
};
//电话号码
const tel = ref("");
//邮箱地址
const email = ref("");
//密码
const password = ref("");
//密码
const surepassword = ref("");
//工作地点
const result1 = ref("");
const showArea = ref(false);
const onConfirm1 = ({ selectedOptions }: any) => {
  showArea.value = false;
  result1.value = selectedOptions.map((item: any) => item.text).join("/");
};
//个人简介
const message = ref("");
// 个人照片
const value = ref([
  { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
]);

const onSubmit = (values: any) => {
  console.log("submit", values);
  console.log(tel.value);
};
</script>

<style lang="less" scoped>
header {
  height: @header;
  // border: 3px solid;
  line-height: 70px;
  margin-left: 10px;
}
.create {
  // margin-top: 20px;
  // margin-left: 20px;
  margin: 20px 16px;
  width: 150px;

  // border: 2px solid;
}
.img-icon {
  height: 20px;
}
van-form {
  height: 200px;
  margin-left: 20px;
  border: 2px solid;
}
</style>
